<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :replace="true" :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-table :data="tableDate" stripe border style="width: 100%">
        <el-table-column type="index" label="#">
        </el-table-column>
        <el-table-column prop="rightsName" label="权限名称">
        </el-table-column>
        <el-table-column prop="requestPath" label="请求路径">
        </el-table-column>
        <el-table-column prop="levels" label="权限等级">
          <template slot-scope="scope">
            <el-tag v-if=" scope.row.levels === '1' ">一级</el-tag>
            <el-tag type="success" v-if=" scope.row.levels === '2' ">二级</el-tag>
            <el-tag type="warning" v-if=" scope.row.levels === '3' ">三级</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableDate: [
        { 'rightsName': '分配权限', 'requestPath': '/users/rights/:id', 'levels': '3' },
        { 'rightsName': '添加角色', 'requestPath': '/users/delete/:id', 'levels': '3' },
        { 'rightsName': '编辑角色', 'requestPath': '/users/edit/:id', 'levels': '3' },
        { 'rightsName': '删除角色', 'requestPath': '/users/delete/:id', 'levels': '3' },
        { 'rightsName': '删除用户', 'requestPath': '/users/delete/:id', 'levels': '2' },
        { 'rightsName': '发帖', 'requestPath': '/', 'levels': '1' },
        { 'rightsName': '评论', 'requestPath': '/', 'levels': '1' }
      ]
    }
  }
}

</script>
<style>
.el-breadcrumb {
  margin-bottom: 15px;
}

.el-card {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15) !important;
}

</style>
